<template>
	<view>
		<!-- 标题信息 -->
		<view class="flex bw-title">
			<view class="flex-sub bw-title-left"><text>会员卡</text></view>
			<view class="flex-sub bw-title-right">
				<navigator url="/pages/history/history" class="cu-item arrow"><text>充值明细</text></navigator>
			</view>
		</view>

		<!-- 卡券信息 -->
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="image">
					<image src="/static/vip_bg.png" mode="widthFix"></image>
					<view class="money" v-if="is_login">
						{{ config.tips }}：
						<text class="money_num">{{ userMoney }}</text>
					</view>
					<navigator class="login" v-else url="/pages/login/login">点击登录</navigator>
					<view class="cu-tag bg-blue">VIP</view>
					<view class="cu-bar bg-shadeBottom"><text class="text-cut">有效期至：2019-09-25</text></view>
				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu">
			<navigator url="/pages/tools/tools" class="cu-item arrow" v-if="power">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						店长管理器
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						店长扫描消费工具
					</view>
				</view>
			</navigator>
			<navigator url="/pages/coupon/coupon" class="cu-item arrow">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						我的优惠券
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						查看可使用优惠券
					</view>
				</view>
			</navigator>

			<navigator url="/pages/qrcode/qrcode" class="cu-item arrow">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						我的二维码
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						点击查看二维码
					</view>
				</view>
			</navigator>

			<view class="cu-item arrow" @tap="showModal" data-target="bottomModal" v-if="config.chongzhi">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						立即充值
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						快速充值成为会员
					</view>
				</view>
			</view>

			<view class="cu-item arrow" @tap="onlogout" data-target="bottomModal" v-if="is_login">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						立即退出
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						退出后可重新登录
					</view>
				</view>
			</view>

			<!-- 			<navigator url="/pages/record/record" class="cu-item arrow">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs"></text>
						使用记录
					</view>
					<view class="text-gray text-sm">
						<text class="margin-right-xs"></text>
						查看你的消费记录
					</view>
				</view>
			</navigator> -->
		</view>

		<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white"><view class="action text-green" @tap="hideModal">取消</view></view>
				<view class="padding-xl recharge-body">
					<view class="bw-card"></view>
					<view class="bw-recharge">
						<view class="bw-recharge-title">充值金额</view>
						<view class="bw-recharge-inpunt">
							<text>¥</text>
							<input v-model="money" class="uni-input" value="500" />
						</view>
						<view class="bw-recharge-tips"></view>
						<view class="bw-recharge-button"><button type="primary" @click="onPlay">去支付</button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex';
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('user');

export default {
	data() {
		return {
			userMoney: 0,
			modalName: null,
			money: 500,
			config: {},
			power: 0,
			is_login: false
		};
	},
	onShow() {
		console.log("查看yoghurt信息",this.userInfo);
		this.set_config();
		if (JSON.stringify(this.userInfo) == '{}') {
			this.is_login = false;
		} else {
			this.is_login = true;
			this.getUserMoney();
		}
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapMutations(['onUserLogout']),
		set_config() {
			api.benwei.get_config().then(response => {
				console.log('配置信息', response);
				this.config = response;
			});
		},
		hideModal(e) {
			this.modalName = null;
		},
		getUserMoney() {
			let data = {
				open_id: this.userInfo.openId
			};
			api.benwei.get_user_money(data).then(response => {
				console.log('response', response);
				this.userMoney = response.money;
				this.power = response.power ? response.power : 0;
			});
		},
		onPlay() {
			console.log(this.userInfo);
			if (JSON.stringify(this.userInfo) == '{}') {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return;
			}
			let data = {
				open_id: this.userInfo.openId,
				recharge_monetary: this.money,
				recharge_status: 0
			};
			console.log('提交数据', data);
			api.benwei.on_payment(data).then(response => {
				console.log('response');
				this.weixinPay(response);
			});
		},
		weixinPay(response) {
			var self = this;
			// 仅作为示例，非真实参数信息。
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: response.timeStamp,
				nonceStr: response.nonceStr,
				package: 'prepay_id=' + response.package,
				signType: response.signType,
				paySign: response.paySign,
				success: function(res) {
					self.modalName = null;
					self.getUserMoney();
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					self.modalName = null;
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		onlogout(){
			console.log("执行我");
			this.onUserLogout();
			this.is_login = false;
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		}
	}
};
</script>

<style lang="scss">
.cu-card > .cu-item {
	margin: 38rpx;
}

.cu-bar {
	min-height: 60rpx;
}

.image {
	.money {
		position: absolute;
		left: 30rpx;
		top: 25%;
		color: #fff;
		font-size: 14px;
		font-weight: 200;

		.money_num {
			font-size: 38px;
		}
	}
	.login {
		position: absolute;
		left: 30rpx;
		top: 25%;
		color: #fff;
		font-size: 12px;
		font-weight: 200;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #fff;
		text-align: center;
		line-height: 30px;
		padding: 0 10px;
	}
}

.bw-title-left {
	padding-top: 40rpx;
	padding-left: 40rpx;
	line-height: 30rpx;
	font-size: 20px;
}

.bw-title-right {
	text-align: right;
	font-size: 12px;
	padding-top: 50rpx;
	padding-right: 50rpx;
	color: #999;
}

.recharge-body {
	height: 500rpx;
}

.bw-recharge {
	text-align: center;

	.bw-recharge-title {
		font-size: 18px;
		margin-bottom: 20rpx;
	}

	.bw-recharge-button {
		margin-top: 30rpx;
		text-align: center;

		button {
			width: 300rpx;
			height: 80rpx;
			font-size: 14px;
			line-height: 80rpx;
		}
	}

	.bw-recharge-inpunt {
		text {
			line-height: 60rpx;
			font-size: 16px;
			padding-right: 10rpx;
		}

		.uni-input {
			width: 200rpx;
			display: inline-block;
			line-height: 60rpx;
			font-size: 14px;
			vertical-align: text-bottom;
			margin-bottom: 2px;
			margin-bottom: -2px\9;
			margin: 0;
			border-bottom: 1rpx solid #333333;
		}
	}
}
</style>
